<script setup lang="ts">
// 数据
import {reactive} from "vue";

const state = reactive({
  model: {
    account: '', // 账号
    password: '', // 密码
  },
  rules: {
  },
});
</script>

<template>
  <view class="py-6.25 px-4.25">
    <!-- 标题栏 -->
    <view class="head-box mb-7.5 ss-flex-col">
      <view class="relative flex mb-2.5">
        <view class="text-base font-bold mr-5 ">账号登录</view>
        <!-- 装饰线 -->
        <view class="w-[0.5px] h-[17px] bg-[#e4e7ed] absolute left-[85px] top-1/2 transform -translate-y-1/2"></view>

        <view class="text-base font-semibold text-gray-500" @tap="showAuthModal('smsLogin')">
          短信登录
        </view>
      </view>
      <view class="text-xs text-gray-400 font-normal">如果未设置过密码，请点击忘记密码</view>
    </view>

    <!-- 表单项 -->
    <uni-forms
        ref="accountLoginRef"
        v-model="state.model"
        :rules="state.rules"
        validateTrigger="bind"
        labelWidth="140"
        labelAlign="center"
    >
      <uni-forms-item name="account" label="账号">
        <uni-easyinput placeholder="请输入账号" v-model="state.model.account" :inputBorder="false">
          <template v-slot:right>
            <button class="ss-reset-button forgot-btn" @tap="showAuthModal('resetPassword')">
              忘记密码
            </button>
          </template>
        </uni-easyinput>
      </uni-forms-item>

      <uni-forms-item name="password" label="密码">
        <uni-easyinput
            type="password"
            placeholder="请输入密码"
            v-model="state.model.password"
            :inputBorder="false"
        >
          <template v-slot:right>
            <button class="ss-reset-button login-btn-start" @tap="accountLoginSubmit">登录</button>
          </template>
        </uni-easyinput>
      </uni-forms-item>
    </uni-forms>

  </view>
</template>

<style scoped>

</style>